* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*,    
/* 设置 body 元素样式 */
body {
    margin: 0px;
    /* 设置元素内边距，左右各添加 5px */
    /*padding: 0px 5px;*/
    padding: 0px;
    /* 设置文字颜色为白色 */
    color: #fff;
    /* 设置字体 */
    font-family: "微软雅黑";
}

/* 设置 HTML 和 body 元素的样式 */
html,
body {
    /* 设置背景图片，覆盖整个页面 */
    background: url("../img/bg.jpg") no-repeat;
    /* 背景图片填充整个背景 */
    background-size: cover;
    /* 设置字体大小为 0.16rem */
    font-size: .16rem;
    /* 设置文字颜色为白色 */
    color: #fff;
    /* 设置元素相对定位 */
    position: relative;
    /* 设置宽度为视口宽度 */
    width: 100%;
    /* 设置高度为视口高度 */
    height: 100%;
}



.fl {
    float: left;
}

.fr {
    float: right;
}

ul,
ol {
    list-style: none;
}


.allnav {
    height: 100%;
}

.main {
    /* width: 100%;
    height: 100%;
    background: url("../img/bj.png") no-repeat;
    background-size: cover;
    position: relative; */
}

/*头部*/

.header {
    height: 11%;
    width: 100%;
    display: inline-block;
}

/*头部左边*/

.header .topbnt_left {
    width: 33%
}

.header .topbnt_left ul {
    padding-top: 38px;
    padding-left: 10%;
    width: 100%
}

.header .topbnt_left li {
    background: url(../img/bnt.png) center;
    font-size: 14px;
    line-height: 40px; /* 增大按钮的高度，以适应更大的间距 */
    background-repeat: no-repeat;
    width: 22%; /* 增大按钮的宽度 */
    height: 40px; /* 增大按钮的高度 */
    float: left;
    text-align: center;
    margin-left: 10%; /* 增大按钮之间的间距 */
    margin-right: 2%; /* 增大按钮之间的间距 */
}


.header .topbnt_left li a {
    text-decoration: none;
    color: #fff;
}

.header .tith1 {
    width: 35%;
    text-align: center;
    padding-top: 16px;
    font-weight: bold;
    letter-spacing: 8px;
    font-size: 36px;
}

/*头部右边*/

.header .topbnt_right {
    padding-top: 2%;
    padding-right: 2.5%; /* 增大右侧按钮组的右边距 */
    width: 30%  /* 调整右侧按钮组的宽度 */
}

.header .topbnt_right li {
    background: url(../img/bnt.png) center;
    font-size: 14px;
    line-height: 40px; /* 增大按钮的高度，以适应更大的间距 */
    background-repeat: no-repeat;
    width: 22%; /* 增大按钮的宽度 */
    height: 40px; /* 增大按钮的高度 */
    float: left;
    text-align: center;
    margin-left: 10%; /* 增大按钮之间的间距 */
    margin-right: 10%; /* 增大按钮之间的间距 */
}

.header .topbnt_right li a {
    text-decoration: none;
    color: #fff;
}

/*admain图标*/
.admain {
    position: absolute;
    top: 21px; /* 将图片向下移动 10px */
    right: 42px; /* 将图片向左移动 10px */
    width: 50px;
    height: 50px;
    background: url(../img/dm.png) center no-repeat;
    background-size: cover;
    cursor: pointer;
    /* 其他样式 */
}


.title {
    width: 100%;
    height: .3rem;
    /*border: 1px solid red;*/
    color: #ffffff;
    font-size: .2rem;
    padding-left: .3rem;
    line-height: .4rem;
    background: url("../img/dataCenter/ksh33.png") no-repeat;
    background-size: 100% 100%;
    margin-top: .1rem;
    position: relative;
}

.content {
    padding: .2rem .1rem 0 .1rem;
    /* background: url("../img/dataCenter/a.png"); */
    display: flex; /* 添加这行使 .content 的子元素在同一行上 */


}

.content .content-title {
    margin-left: 10rem;
    width: 80%;
    background: url("../img/smartCenter/title.png");
}

.content-title span {
    margin-left: 60rem;
    font-size: 22px;
    color: #ffffff;
}

/* 左中右 */

.content .content-left {
    width: 28%;
    padding: .1rem;

    /* 上下对齐 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content .content-center {
    width: 45%;
    padding: .1rem;

    /* 上下对齐 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}

.content .content-right {
    width: 28%;
    padding: .1rem;

    /* 上下对齐 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}



/* 中 */
.content .content-center .center-top {
    width: 100%;
    height: 150rem;
    background: url("../img/smartCenter/map.png");
    background-size: 100% 100%; /* 添加这行使图片完全适应元素的宽度和高度 */
    text-align: center; /* 添加这行使文本居中 */
    /* display: flex; 添加这行使子元素居中 */
    /* justify-content: center; 添加这行使子元素居中 */
}

.content .content-center .center-top span{
    width: 100%;
    margin-left: 0rem;
    font-size: 24px;
    color: #ffffff;
}


.content .content-center .center-top .center-pic {
    width: 80%;
    height: 80%;
    margin-top: 5rem;
    margin-left: 25rem;
    /* background: url("../img/test-pic.jpg"); */
    background-size: 100% 100%; /* 添加这行使图片完全适应元素的宽度和高度 */
}

.content .content-center .center-bottom {
    margin-top: 5rem;
    width: 100%;
    height: 100rem;
    background: url("../img/dataCenter/a.png");
    background-size: 100% 100%;



}

.content .content-center .center-bottom .bottom-top {
    display: flex;

}


.content .content-center .center-bottom .bottom-top .bottom-pic {
    margin-top: 4rem;
    margin-left: 5rem;
    width: 30%;
    height: 40rem;
    /* background: url("../img/smartCenter/8.png"); */
    background-size: 100% 100%;

}

.content .content-center .center-bottom .bottom-top .bottom-middle {
    margin-top: 4rem;
    width: 10%;
    height: 40rem;
    background: url("../img/smartCenter/bg2.png");
    background-size: 100% 100%; /* 添加这行使图片完全适应元素的宽度和高度 */

}

.content .content-center .center-bottom .bottom-top .bottom-text{
    margin-top: 10rem;
    margin-left: 10rem;
    width: 50%;
}

.bottom-text ul {
    list-style-type: disc; /* 使用圆点作为列表标记 */
}


.bottom-text ul li {
    /* font-family: 'Arial', sans-serif; 设置字体为 Arial */
    font-family: 'KaiTi', '楷体', serif; /* 设置字体为楷体 */
    font-size: 22px; /* 设置字体大小为 16px */
    font-weight: normal; /* 设置字体粗细为正常 */
    color: #ffffff; /* 设置字体颜色白色 */
}


.content .content-center .center-bottom .bottom-bottom{

    display: flex; /* 将父元素设置为 flex 容器 */

}

.content .content-center .center-bottom .bottom-bottom .box{
    margin-top: 5px;
    margin-left: 4px;
    margin-right: 4px;
    width: 20%;
    height: 50rem;
    background: url("../img/smartCenter/7.png");
    flex: 1;
}

.box p{
    margin-top: 2rem;
    margin-left: 20rem;
    /* font-family: 'Arial', sans-serif; 设置字体为 Arial */
    font-family: 'KaiTi', '楷体', serif; /* 设置字体为楷体 */
    font-size: 22px; /* 设置字体大小为 16px */
    font-weight: normal; /* 设置字体粗细为正常 */
    color: #ffffff; /* 设置字体颜色白色 */
}

.box .box-num{
    margin-top: 4rem;
    margin-left: 20rem;
    font-family: 'Arial', sans-serif; /* 设置字体为 Arial */
    font-size: 22px; /* 设置字体大小为 16px */
    font-weight: normal; /* 设置字体粗细为正常 */
    color: #f51738; 
}

.box .box-updown{
    margin-bottom: 10rem;
    margin-left: 10rem;
    font-family: 'Arial', sans-serif; /* 设置字体为 Arial */
    font-size: 12px; /* 设置字体大小为 16px */
    font-weight: normal; /* 设置字体粗细为正常 */
    color: #f51738; 
}

.content .content-center .center-bottom .bottom-bottom .bottom-left{
    margin-left: 5rem;
    width: 50%;
    flex:1;
    /* border-color: #f51738; */
}

.content .content-center .center-bottom .bottom-bottom .bottom-right{
    width: 50%;
    flex:1;
    /* border-color: #f51738; */
}

table {
    margin-top: 10rem;
    border-collapse: collapse;
    width: 60%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* background-color: rgb(36, 74, 158); */
    border-radius: 8px;
    overflow: hidden;
}

th, td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #1d41a2;
    color: rgb(0, 0, 0);
    text-transform: uppercase;
}

th.clickable {
    cursor: pointer;
}

th.clickable:hover {
    background-color: #0f3e8f; /* Even darker green on hover */
}

/* tr:hover {
    background-color: #f1f1f1;
} */

tr:last-child td {
    border-bottom: none;
}


/* 左 */

.content .content-left .left-top {
    margin-left: 15rem;
    margin-top: 15rem;
    width: 80%; /* 使 .left-top 的宽度和 .center-top 一样 */
    height: 120rem; /* 设置 .left-top 的高度为 75rem */
    background: url("../img/smartCenter/lbx.png");
    background-size: 100% 100%; /* 添加这行使图片完全适应元素的宽度和高度 */

}

.content .content-left .left-bottom {
    margin-left: 10rem;
    margin-top: 5rem; /* 在 .left-top 和 .left-bottom 之间添加 10rem 的空隙 */
    width: 90%; /* 使 .left-bottom 的宽度和 .center-bottom 一样 */
    height: 10rem; /* 设置 .left-bottom 的高度为 75rem */
    background: url("../img/smartCenter/3.png");
    background-size: 100% 100%; /* 添加这行使图片完全适应元素的宽度和高度 */

}

.content .content-left .left-bottom span{
    margin-left: 53rem;
    font-size: 18px;
    color: #ffffff;
}

/* 右 */
.content .content-right .right-top {
    margin-left: 10rem;
    margin-top: 5rem;
    width: 85%; /* 使 .left-top 的宽度和 .center-top 一样 */
    height: 120rem; /* 设置 .left-top 的高度为 75rem */
    background: url("../img/smartCenter/jt.png");
    background-size: 100% 100%; /* 添加这行使图片完全适应元素的宽度和高度 */

}

.content .content-right .suggest {
    margin-left: 10rem;
    margin-top: 5rem;
    width: 85%; /* 使 .left-top 的宽度和 .center-top 一样 */
    height: 120rem; /* 设置 .left-top 的高度为 75rem */
    font-size: large;
    color: #f51738;

}

.content .content-right .right-bottom {
    margin-left: 5rem;
    margin-top: 0rem; /* 在 .left-top 和 .left-bottom 之间添加 10rem 的空隙 */
    width: 90%; /* 使 .left-bottom 的宽度和 .center-bottom 一样 */
    height: 10rem; /* 设置 .left-bottom 的高度为 75rem */
    background: url("../img/smartCenter/3.png");
    background-size: 100% 100%; /* 添加这行使图片完全适应元素的宽度和高度 */

}

.content .content-right .right-bottom span{
    margin-left: 53rem;
    font-size: 18px;
    color: #ffffff;
}

/* 聊天框 */
.chat-container {
    margin-left: 20px;
    width: 330px;
    height: 300px;
    border: 1px solid #142f7a;
    display: flex;
    flex-direction: column;
}

.chat-header {
    padding: 10px;
    background: #0b86c4;
    border-bottom: 1px solid #07328f;
}

.chat-content {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
}

.chat-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid #088ebf;
}

.chat-input input {
    flex: 1;
    padding: 5px;
    color:rgb(3, 11, 77);

}

.chat-input button {
    margin-left: 10px;
    background-color: #07328f;
}

._table0 {
    margin-top: 30px;
    margin-left: -23px;
    width: 360px;
    height:235px;
}


._table1 {
    margin-top: 20px;
    width: 360px;
    height:235px;
}

._table2 {
    margin-top: 20px;
    margin-left: -20px;
    width: 400px;
    height:255px;
}